import {WidgetClass} from "../atom/widget";
import {WidgetFactory} from "@/modules/IDE/widgetFactory";

export class MeetingList extends WidgetClass {
  constructor(options = {}) {
    super(options);
    const {ports, UI} = options;
    if (UI) {
      this.UI.data = UI.data;
    }
    if (ports) {
      this.ports = ports;
    } else {
      this.ports = this.assembleDefaultPorts();
    }
    this.dftOption = {
      roomId: this.roomId,
      componentId: this.componentId,
      subPageId: this.subPageId,
    };
  }

  initTab(option = {}) {
    const lastContainer = WidgetFactory.createContainer({
      ...this.dftOption,
      backStyle: {backgroundColor: 'bg-color-container', borderRadius: {width: 20}},
      rect: {top: 15, left: 18, width: 436, height: 138},
      syncToFactory: option.syncToFactory,
      name: '上一场会议'
    });

    const nowContainer = WidgetFactory.createContainer({
      rect: {top: 168, left: 18, width: 436, height: 138},
      backStyle: {backgroundColor: 'bg-color-container', borderRadius: {width: 20}},
      ...this.dftOption,
      syncToFactory: option.syncToFactory,
      name: '进行中会议'
    });

    const nextContainer = WidgetFactory.createContainer({
      rect: {top: 321, left: 18, width: 436, height: 138},
      backStyle: {backgroundColor: 'bg-color-container', borderRadius: {width: 20}},
      ...this.dftOption,
      syncToFactory: option.syncToFactory,
      name: '未开始会议'
    });
    WidgetFactory.widgetAppendChild(this, lastContainer);
    WidgetFactory.widgetAppendChild(this, nowContainer);
    WidgetFactory.widgetAppendChild(this, nextContainer);
    const lastText = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 18, left: 24, width: 80, height: 30},
      textStyle: {color: 'rgba(153, 153, 153, 1)', size: '14',align: 'left'},
      values: {text: '上一场'},
      syncToFactory: option.syncToFactory,
      name: '上一场'
    });
    const lastTag = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 14, left: 362, width: 62, height: 22},
      textStyle: {color: 'rgba(138, 142, 166, 1)', size: '12'},
      values: {text: '已结束'},
      syncToFactory: option.syncToFactory,
      name: '已结束状态'
    });
    const lastTitle = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 47, left: 24, width: 366, height: 30},
      backStyle: {backgroundColor: 'transparent'},
      textStyle: {color: 'rgba(51, 51, 51, 1)', size: '20',align: 'left'},
      values: {text: '上一场会议标题'},
      syncToFactory: option.syncToFactory,
      name: '上一场会议标题'
    });
    const lastIcon = WidgetFactory.createIcon({
      ...this.dftOption,
      rect: {top: 81, left: 24, width: 25, height: 25},
      iconStyle: {color: 'rgba(102, 102, 102, 1)', size: '16'},
      values: {icon: 'e891'},
      syncToFactory: option.syncToFactory,
      name: '上一场时间图标'
    });
    const lastTime = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 77, left: 59, width: 152, height: 30},
      textStyle: {color: 'rgba(102, 102, 102, 1)', size: '14',align: 'left'},
      values: {text: '10:00-12:00'},
      syncToFactory: option.syncToFactory,
      name: '上一场时间文本'
    });
    const lastPerson = WidgetFactory.createIcon({
      ...this.dftOption,
      rect: {top: 106, left: 24, width: 25, height: 25},
      iconStyle: {color: 'rgba(102, 102, 102, 1)', size: '16'},
      values: {icon: 'e7aa'},
      syncToFactory: option.syncToFactory,
      name: '上一场人物图标'
    });
    const lastInfo = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 103, left: 59, width: 152, height: 30},
      textStyle: {color: 'rgba(102, 102, 102, 1)', size: '14',align: 'left'},
      values: {text: '杨某某-13341315752'},
      syncToFactory: option.syncToFactory,
      name: '上一场预约人文本'
    });
    const lastButton = WidgetFactory.createIconTextButton({
      ...this.dftOption,
      rect: {top: 77, left: 298, width: 120, height: 40},
      backStyle: {backgroundColor: 'brand-color', borderRadius: {width: 10}},
      textStyle: {color: 'bg-color-container', size: '14'},
      values: {text: '一键入会'},
      syncToFactory: option.syncToFactory,
      name: '上一场一键入会按钮'
    });
    const nowText = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 18, left: 24, width: 80, height: 30},
      textStyle: {color: 'rgba(153, 153, 153, 1)', size: '14',align: 'left'},
      values: {text: '当前'},
      syncToFactory: option.syncToFactory,
      name: '当前'
    });
    const nowTag = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 14, left: 362, width: 62, height: 22},
      textStyle: {color: 'rgba(45, 105, 224, 1)', size: '12'},
      values: {text: '进行中'},
      syncToFactory: option.syncToFactory,
      name: '进行中状态'
    });
    const nowTitle = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 47, left: 24, width: 366, height: 30},
      backStyle: {backgroundColor: 'transparent'},
      textStyle: {color: 'rgba(51, 51, 51, 1)', size: '20',align: 'left'},
      values: {text: '当前会议标题'},
      syncToFactory: option.syncToFactory,
      name: '当前会议标题'
    });
    const nowIcon = WidgetFactory.createIcon({
      rect: {top: 81, left: 24, width: 25, height: 25},
      iconStyle: {color: 'text-color-primary', size: '16'},
      values: {icon: 'e891'},
      syncToFactory: option.syncToFactory,
      name: '当前时间图标'
    });
    const nowTime = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 77, left: 59, width: 152, height: 30},
      textStyle: {color: 'text-color-primary', size: '14',align: 'left'},
      values: {text: '10:00-12:00'},
      syncToFactory: option.syncToFactory,
      name: '当前时间文本'
    });
    const nowPerson = WidgetFactory.createIcon({
      rect: {top: 106, left: 24, width: 25, height: 25},
      iconStyle: {color: 'text-color-primary', size: '16'},
      values: {icon: 'e7aa'},
      syncToFactory: option.syncToFactory,
      name: '当前人物图标'
    });

    const nowInfo = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 103, left: 59, width: 195, height: 30},
      textStyle: {color: 'text-color-primary', size: '14',align: 'left'},
      values: {text: '杨某某-13341315752'},
      syncToFactory: option.syncToFactory,
      name: '当前预约人文本'
    });
    const nowButton = WidgetFactory.createIconTextButton({
      ...this.dftOption,
      rect: {top: 77, left: 298, width: 120, height: 40},
      backStyle: {backgroundColor: 'brand-color', borderRadius: {width: 10}},
      textStyle: {color: 'bg-color-container', size: '14'},
      values: {text: '一键入会'},
      syncToFactory: option.syncToFactory,
      name: '当前一键入会按钮'
    });
    const nextText = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 18, left: 24, width: 80, height: 30},
      textStyle: {color: 'rgba(138, 142, 166, 1)', size: '14',align: 'left'},
      values: {text: '下一场'},
      syncToFactory: option.syncToFactory,
      name: '下一场'
    });
    const nextTag = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 14, left: 362, width: 62, height: 22},
      textStyle: {color: 'success-color', size: '12'},
      values: {text: '未开始'},
      syncToFactory: option.syncToFactory,
      name: '未开始状态'
    });
    const nextTitle = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 47, left: 24, width: 150, height: 30},
      backStyle: {backgroundColor: 'transparent'},
      textStyle: {color: 'text-color-primary', size: '20',align: 'left'},
      values: {text: '下一场会议标题'},
      syncToFactory: option.syncToFactory,
      name: '下一场会议标题'
    });
    const nextIcon = WidgetFactory.createIcon({
      ...this.dftOption,
      rect: {top: 81, left: 24, width: 25, height: 25},
      iconStyle: {color: 'text-color-primary', size: '16'},
      values: {icon: 'e891'},
      syncToFactory: option.syncToFactory,
      name: '下一场时间图标'
    });
    const nextTime = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 77, left: 59, width: 152, height: 30},
      textStyle: {color: 'text-color-primary', size: '14',align: 'left'},
      values: {text: '10:00-12:00'},
      syncToFactory: option.syncToFactory,
      name: '下一场时间文本'
    });
    const nextPerson = WidgetFactory.createIcon({
      ...this.dftOption,
      rect: {top: 106, left: 24, width: 25, height: 25},
      iconStyle: {color: 'text-color-primary', size: '16'},
      values: {icon: 'e7aa'},
      syncToFactory: option.syncToFactory,
      name: '下一场人物图标'
    });
    const nextInfo = WidgetFactory.createText({
      ...this.dftOption,
      rect: {top: 103, left: 59, width: 195, height: 30},
      textStyle: {color: 'text-color-primary', size: '14',align: 'left'},
      values: {text: '杨某某-13341315752'},
      syncToFactory: option.syncToFactory,
      name: '下一场预约人文本'
    });
    const nextButton = WidgetFactory.createIconTextButton({
      ...this.dftOption,
      rect: {top: 77, left: 298, width: 120, height: 40},
      backStyle: {backgroundColor: 'brand-color', borderRadius: {width: 10}},
      textStyle: {color: 'bg-color-container', size: '14'},
      values: {text: '一键入会'},
      syncToFactory: option.syncToFactory,
      name: '下一场一键入会按钮'
    });
    WidgetFactory.widgetAppendChild(lastContainer, lastText);
    WidgetFactory.widgetAppendChild(lastContainer, lastTitle);
    WidgetFactory.widgetAppendChild(lastContainer, lastTag);
    WidgetFactory.widgetAppendChild(lastContainer, lastIcon);
    WidgetFactory.widgetAppendChild(lastContainer, lastTime);
    WidgetFactory.widgetAppendChild(lastContainer, lastPerson);
    WidgetFactory.widgetAppendChild(lastContainer, lastInfo);
    WidgetFactory.widgetAppendChild(lastContainer, lastButton);
    WidgetFactory.widgetAppendChild(nowContainer, nowText);
    WidgetFactory.widgetAppendChild(nowContainer, nowTitle);
    WidgetFactory.widgetAppendChild(nowContainer, nowTag);
    WidgetFactory.widgetAppendChild(nowContainer, nowIcon);
    WidgetFactory.widgetAppendChild(nowContainer, nowTime);
    WidgetFactory.widgetAppendChild(nowContainer, nowPerson);
    WidgetFactory.widgetAppendChild(nowContainer, nowInfo);
    WidgetFactory.widgetAppendChild(nowContainer, nowButton);
    WidgetFactory.widgetAppendChild(nextContainer, nextText);
    WidgetFactory.widgetAppendChild(nextContainer, nextTitle);
    WidgetFactory.widgetAppendChild(nextContainer, nextTag);
    WidgetFactory.widgetAppendChild(nextContainer, nextIcon);
    WidgetFactory.widgetAppendChild(nextContainer, nextTime);
    WidgetFactory.widgetAppendChild(nextContainer, nextPerson);
    WidgetFactory.widgetAppendChild(nextContainer, nextInfo);
    WidgetFactory.widgetAppendChild(nextContainer, nextButton);

  }

  assembleDefaultPorts() {
    const superState = super.assembleDefaultPorts();
    return {
      ...superState,
      values: [
        ...superState.values,
        {
          name: "上一场,会议名称",
          key: "previousSubject",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议时间",
          key: "previousTime",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议开始时间",
          key: "previousTimeStart",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议结束时间",
          key: "previousTimeEnd",
          type: "string",
          value: null
        },
        {
          name: "上一场,预约人",
          key: "previousReservedBy",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议号码",
          key: "previousNum",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议密码",
          key: "previousPassword",
          type: "string",
          value: null
        },
        {
          name: "上一场,会议类型",
          key: "previousType",
          type: "string",
          value: null
        },
        {
          name: "当前,会议名称",
          key: "currentSubject",
          type: "string",
          value: null
        },
        {
          name: "当前,会议时间",
          key: "currentTime",
          type: "string",
          value: null
        },
        {
          name: "当前,会议开始时间",
          key: "currentTimeStart",
          type: "string",
          value: null
        },
        {
          name: "当前,会议结束时间",
          key: "currentTimeEnd",
          type: "string",
          value: null
        },
        {
          name: "当前,预约人",
          key: "currentReservedBy",
          type: "string",
          value: null
        },
        {
          name: "当前,会议号码",
          key: "currentNum",
          type: "string",
          value: null
        },
        {
          name: "当前,会议密码",
          key: "currentPassword",
          type: "string",
          value: null
        },
        {
          name: "当前,会议类型",
          key: "currentType",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议名称",
          key: "nextSubject",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议时间",
          key: "nextTime",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议开始时间",
          key: "nextTimeStart",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议结束时间",
          key: "nextTimeEnd",
          type: "string",
          value: null
        },
        {
          name: "下一场,预约人",
          key: "nextReservedBy",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议号码",
          key: "nextNum",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议密码",
          key: "nextPassword",
          type: "string",
          value: null
        },
        {
          name: "下一场,会议类型",
          key: "nextType",
          type: "string",
          value: null
        }
      ],
      events: [
        ...superState.events,
        {
          name: "会议信息改变",
          key: "meetingChanged",
          eventType: "custom",
          type: "event",
          action: []
        },
        {
          name: "拨号入会",
          key: "joinMeeting",
          eventType: "custom",
          type: "event",
          action: []
        }
      ],
    };
  }
}
